<template>
  <view class="bottom-tab-bar">
    <view
      v-for="(item, index) in tabs"
      :key="item.name"
      :class="['tab-item', { active: current === index }]"
      @click="onTabClick(index)"
    >
      <up-icon
        :name="item.icon"
        customPrefix="iconfont"
        :color="current === index ? '#FF8C00' : '#BDBDBD'"
        :size="item.size"
      />
      <text :class="['tab-label', { active: current === index }]">
        {{ item.label }}
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0, // 默认高亮中间
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const current = ref(props.modelValue);

const tabs = [
  { name: "trade", label: "交易", icon: "coin-icon", size: 20 },
  { name: "ad", label: "广告", icon: "ad-icon", size: 18 },
  { name: "order", label: "订单", icon: "order-icon", size: 16 },
];

const onTabClick = (index) => {
  console.log("index: ", index);
  current.value = index;
  emit("update:modelValue", index);
  emit("change", tabs[index].name);
  // 跳转到对应页面
  let url = "";
  switch (tabs[index].name) {
    case "trade":
      url = "/pages/trade/trade";
      break;
    case "ad":
      url = "/pages/advertisement/advertisement";
      break;
    case "order":
      url = "/pages/orderList/orderList";
      break;
  }
  if (url) {
    console.log("url: ", url);
    if (index === 0) {
      uni.switchTab({
        url: url,
      });
    } else {
      uni.navigateTo({
        url: url,
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.bottom-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom);
  margin: 0 auto 0 auto;
  width: 100vw;
  height: 80rpx;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 100;

  &::before {
    content: "";
    position: absolute;
    left: 5vw;
    right: 5vw;
    bottom: 0;
    height: 88rpx;
    background: #e4e4e4;
    border-radius: 60rpx;
    z-index: -1;
  }
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0 10rpx 0;
  color: #bdbdbd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .tab-label {
    font-size: 20rpx;
    margin-top: 6rpx;
    color: #bdbdbd;
    &.active {
      color: #ff8c00;
    }
  }

  &.active {
    .up-icon {
      color: #ff8c00 !important;
    }
    .tab-label {
      color: #ff8c00;
    }
  }
}
</style>
